<template>
	<view class="list">

		<!-- 司机 -->
		<view v-if="sort === 'driver'">
			<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
				<view class="info">
					<view class="flex">
						<!-- realStatus  0 未认证  1 已活体  2 已过期 -->
						<text class="tips living" v-if="item.realStatus == 1">活体</text>
						<text class="plate">{{item.driver_name}}</text>
						<text class="tips valid" v-if="item.endDateStatus == 0">证件过期</text>
					</view>
					<view class="state flex">
						<text v-if="type == 1" :class="[{'pass':item.status == 2},{'past':item.status == 1}]"
							v-text="statusText(item.status)"></text>
						<text v-else
							:class="[{'pass':item.status == 2},{'past':item.status > 2}, {'gray': item.status == 1}]"
							v-text="auditText(item.status)"></text>
						<!-- 车辆  待审核 已审核 已过期 -->
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>
				<view class="type">{{item.mobile}}</view>
			</view>
		</view>

		<!-- 车辆 -->
		<view v-if="sort === 'vehicle'">
			<view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
				<view class="info">
					<view class="flex">
						<text class="plate">{{item.plateNum || item.manualPlateNum}}</text>
						<text class="tips valid" v-if="expires(item.validPeriod)">证件过期</text>
					</view>
					<view class="state flex">
						<text v-if="type == 1" :class="[{'pass':item.status == 2},{'past':item.status == 1}]"
							v-text="item.statusName"></text>
						<text v-else
							:class="[{'pass':item.status == 2},{'past':item.status > 2}, {'gray': item.status == 1}]"
							v-text="auditText(item.status)"></text>
						<u-icon name="arrow-right" size="16"></u-icon>
					</view>
				</view>
				<view class="type">{{item.typeName}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		driverList
	} from '@/config/api/app.js'
	export default {
		data() {
			return {

			}
		},
		props: {
			type: {
				type: Number,
				required: true
			},
			sort: {
				type: String,
				required: true
			},
			list: {
				type: Array,
				required: true
			}
		},
		methods: {
			goDetail(item) {
				if (this.sort === 'vehicle') {
					let info = JSON.stringify(item)
					if (this.type == 1) {
						uni.navigateTo({
							url: `/pages/vehicle/detailVehicle?info=${info}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/vehicle/detailAudit?info=${info}`
						})
					}
				}
				if (this.sort === 'driver') {
					let info = JSON.stringify(item)
					if (this.type == 1) {
						uni.navigateTo({
							url: `/pages/driver/detailDriver?info=${info}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/driver/detailAudit?info=${info}`
						})
					}
				}
			},
			expires(date) {
				if (!date) {
					return
				}
				let endDate = new Date(date)
				let currentDate = new Date()
				if (endDate > currentDate) {
					return false
				} else {
					return true
				}
			},
			statusText(statu) {
				switch (statu) {
					case '0':
						return '未认证'
						break
					case '1':
						return '已过期'
						break
					case '2':
						return '已认证'
						break
				}
			},
			auditText(statu) {
				// 1.待审核 2.通过 3.驳回 4.申诉中
				switch (statu) {
					case '1':
						return '待审核'
						break
					case '2':
						return '已通过'
						break
					case '3':
						return '已驳回'
						break
					case '4':
						return '申诉中'
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-top: 1rpx solid #F5F7FB;
		padding: 30rpx 24rpx 24rpx;

		.info {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.plate {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				line-height: 44rpx;
			}

			.tips {
				font-size: 22rpx;
				font-weight: 500;
				color: #FFFFFF;
				padding: 6rpx 10rpx;
				border-radius: 4rpx;
			}

			.living {
				background: #16C295;
				margin-right: 12rpx;
			}

			.valid {
				background: #8D090C;
				margin-left: 12rpx;
			}

			.state {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;

				.pass {
					color: #5ABA8E;
					margin-right: 16rpx;
				}

				.past {
					color: #8D090C;
					margin-right: 16rpx;
				}

				.gray {
					color: #BFBFBF;
					margin-right: 16rpx;
				}
			}
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.type {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			margin-top: 8rpx;
		}

		&:first-child {
			border-top: none;
		}
	}
</style>
